<%-- 
    Document   : index
    Created on : 04-08-2012, 09:34:09
    Author     : LocNguyen
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <%-- HEADER --%>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <%-- page title --%>
        <title>LocNguyen</title>
        
        <%-- script --%>
        <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
        
        <script src="js/jquery-1.7.2.js"> </script>
        <script src="js/main.js"> </script>
        <script src="js/gallery.js"> </script>
        <script src="js/enhance.js"> </script>
    </head>
    <%-- BODY --%>
    <body>
        <div class="main-title">Welcome to my page!</div>
        <%--
        <input type="button" id="btn-test" value="Hide"/>
        --%>
        <div id="msg-first" class="msg">
            Site is in maintenance processing, please come back later.
        </div>
        <%-- Gallery --%>
        <div class="clear"></div>
        <div class="rotator" style="float: left;">
            <ul>
                <li class="show"><a href="link1"><img src="http://tb0.upanh.com/thumbpic/16.358.20687539.qbi0/tuiedited.120x1.jpg" title="" width="500" height="313"  alt="pic1" /></a></li>
                <li><a href="#link2"><img src="http://tb6.upanh.com/thumbpic/13.315.17540975.afA0/picture005.120x1.jpg" width="500" height="313"  alt="pic2" /></a></li>
            </ul>
        </div>
        <%-- Personal informations --%>
        <div id="personal-info" style="float: right;">
            <div class="sub-title">Personal information</div>
            <ul>
                <li>Name: <b>Nguyen Van Loc</b></li>
                <li>Age: 24</li>
                <li>Job: Software Engineer</li>
                <li>Email: <a href="mailtl:locnv.uit@gmail.com"> locnv.uit@gmail.com</a></li>
            </ul>
        </div>
        <%-- Select an album to show --%>
        <div class="clear"></div>
        <div class="select-album-to-show">
            <span id="btn-select-show-album" class="atag" type="button"> select an album </span>
        </div>
        <%--
        <div class="current-album-selection">
            <select id="current-album">
                <option> Select album to show </option>
            </select>
        </div>
        --%>
        <div class="clear"></div>
        <%-- Add image --%>
        <div style="margin-left: 25%;">
            <div>
                <span class="atag" id="btn-show-add-img">Add Image</span>
                <span class="atag" title="what this?" onclick="alert('What this? are you asking for me?');">?</span>
            </div>
            <div class="clear"></div>
            <div id="frm-add-img" style="float: left; display: none;">
                <table>
                    <tr>
                        <td> URL </td>
                        <td> <input type="text" placeholder="Input your url" id="img-url"/> </td>
                    </tr>
                    <tr>
                        <td> Comment </td>
                        <td> <input type="text" placeholder="Input pic's comment" id="img-comment"/> </td>
                        </tr>
                    <tr>
                        <td> <input type="button" id="btn-add" value="Add"/> </td>
                        <td> 
                            <select id="list-album">
                                <option> Select an album </option>
                            </select>
                        </td>
                    </tr>
                </table>
                <br />
            </div>
            <div class="clear"></div>
            <div>
                <span class="atag" id="btn-show-add-album">Add album</span>
            </div>
            <div class="clear"></div>
            <div id="frm-add-album" style="float: left; display: none;">
                <table>
                    <tr>
                        <td> Album name </td>
                        <td> <input type="text" placeholder="Input your album's name" id="album-name"/> </td>
                    </tr>
                    <tr>
                        <td> Author </td>
                        <td> <input type="text" placeholder="Input your name" id="album-author"/> </td>
                        </tr>
                    <tr>
                        <td colspan="2"> <input type="button" id="btn-add-album" value="Add"/> </td>
                    </tr>
                </table>
            </div>
            <div class="clear"></div>
            <div style="float: left">
                
            </div>
        </div>
        <%--
        <div>Test controller</div>
        <a href="./SiteController?cmd=ILoveYou">Click to test</a> 
        
        <div class="clear"></div>
        <a href="./SiteController?cmd=test_db">Click to test db</a>
        --%>
    </body>
</html>
